/**
* @file 表单组件
* @author wangcf
* @date 2017-01-11
*/
<template>
  <!--编辑页面列表  不带图标  -->
  <li v-if="list.infoIndex" class="listInfoIndex">
    <p v-text="list.name"></p>
  </li>
  <li v-if="!list.infoIndex" v-show="!list.noShow" class="mui-table-view-cell crm-listSingle">
    <textarea :style="textreaCss" v-if="list.isTextrea" rows="4" v-model="list.value"
              placeholder="{{list.isB ? list.name+'(必填)' : list.name}}"></textarea>
    <a v-if="!list.isTextrea && list.field == 'actionSheetDiv'"
       :class="[list.href && list.href !=0 && list.href!='not' ? 'mui-navigate-right' : '']" href="#actionSheetDiv">
        <span>
          <span class="mui-icon" :class='list.icon'><label class="iconmg">{{list.name}}</label><sup
            v-if="list.isB">*</sup></span>
	    	</span>
      <div v-if="list.href" v-text="list.value"></div>
      <input type="{{list.inputType}}" v-else v-model.trim="list.value" @focus="inputBlock" @input="change()"
             @blur="noInputBlock"/>
      <span class="crm-close mui-icon" @click="clear()" v-if="show && list.value"> </span>
    </a>
    <a v-if="!list.isTextrea && list.field !== 'actionSheetDiv'"
       :class="[list.href && list.href !=0 && list.href!='not' ? 'mui-navigate-right' : '']" @click="tapLink">
        <span>
          <span class="mui-icon" :class='list.icon'><label class="iconmg">{{list.name}}</label><sup
            v-if="list.isB">*</sup></span>
	    	</span>
      <div v-if="list.href" v-text="list.value"></div>
      <input type="{{list.inputType}}" v-else v-model.trim="list.value" @focus="inputBlock" @input="change()"
             @blur="noInputBlock" placeholder="{{list.isB ? list.name+'(必填)' : list.name}}"/>
      <span class="crm-close mui-icon" @click="clear()" v-if="show && list.value"> </span>
    </a>
  </li>
</template>
<style lang="less" rel="stylesheet/less">
  @import '../../css/module.css';
  @import '../../css/mui.picker.min.css';
  @import 'listsingle.css';
</style>
<script>
  require('mui.picker.min');
  var nativeApi = require('nativeApi');
  export default{
    props: {
      list: {
        type: Object
      }
    },
    data: function () {
      return {
        show: false,
        textreaCss: {
          'margin': 0,
          'padding': 0,
          'border': 0,
          'font-size': 14 + 'px',
          'color': '#333',
        }
      };
    },
    methods: {
      tapLink: function () {
        var field = this.list;
        /*时间选择*/
        if (field.inputType === 'date') {
          /*年月日选择*/
          var picker = new mui.DtPicker({
            'value': field.value || '',
            'beginYear': '1916',
            'endYear': '2018',
            'type': 'date'
          });
          picker.show(function (rs) {
            field.value = rs.text;
            picker.dispose();
          });
        } else if (field.inputType === 'datetime') {
          /*年月日时分选择*/
          var picker = new mui.DtPicker({
            'value': field.value || '',
            'beginYear': '1916',
            'endYear': '2018',
            'type': ''
          });
          picker.show(function (rs) {
            field.value = rs.text;
            picker.dispose();
          });
        } else if (field.inputType === 'month') {
          /*年月选择*/
          var picker = new mui.DtPicker({
            'value': field.value || '',
            'beginYear': '1916',
            'endYear': '2018',
            'type': 'month'
          });
          picker.show(function (rs) {
            field.value = rs.text;
            picker.dispose();
          });
        }
        /*页面跳转*/
        else if (field.href === '2' && field.href != 'not') {
          var self = this;
          self.$dispatch('goOtherPage', field);
        }
        /*地址选择跳转*/
        else if (field.inputType === 'address') {
          this.$router.go('/addAddress');
          window.setAddress = function () {
            return field.valueData;
            window.setAddress = null;
          }
          window.addAddress = function (data) {
            console.info(JSON.stringify(data) + '打印地址信息');
            field.valueData = data;
            field.value = data.address + data.detailAddress;
            history.go(-1);
            window.addAddress = null;
          }
        }
        /*需要选择的字段*/
        else if (field.inputType === 'select' && field.href != 'not') {
          this.$dispatch('formBack', field, '0');
        }
        else if (field.inputType === 'selectMore' && field.href != 'not') {
          this.$dispatch('formBack', field, '1');
        }
      },
      clear: function () {
        console.info('清除value');
        this.list.value = '';
        this.show = false;
      },
      inputBlock: function () {
        this.show = true;
        var list = this.list;
        nativeApi.showKeyboard({
          callback: function (result) {
            list.value = result.result;
          }
        });
      },
      noInputBlock: function () {
        var self = this;
        setTimeout(function () {
          self.show = false;
        }, 10);
      },
      change: function () {
        var self = this;
        var field = self.list;
        if (self.list.value.length > 0) {
          self.show = true;
        }
        if (field.field === 'payAmount') {
          self.$dispatch('payAmountCn');
        }
      }
    },
    ready: function () {
      console.info('单选');
    }
  }
</script>
